<style>

    .panel > .content.c1 {
        width: 916px;
        height: 160px;
        margin: 0 auto;
    }

    .panel > .content > .assets {
        height: 160px;
        width: 236px;
        float: left;
        margin-top: 20px;
        position: relative
    }

    .panel > .content .assets.a {
        background: url("img/grades_bg@2x.png") center no-repeat;
    }

    .panel > .content .assets.b {
        background: url("img/money_bg@2x.png") center no-repeat;
        margin: 20px 104px 0 104px
    }

    .panel > .content .assets.c {
        background: url("img/credit_bg@2x.png") center no-repeat;
    }

    .panel > .content > .assets .line_1 {
        margin-top: 26px;
        color: #FFFFFF;
    }

    .panel > .content > .assets .line_2 {
        color: #FFFFFF;
        margin-top: 42px;
        margin-left: 5px;
        font-family: Microsoft YaHei;
        height: 20px;
        line-height: 20px;
    }
    .panel > .content > .assets .line_2 img{
        cursor: pointer;
    }
    .panel > .content > .assets .line_3 {
        box-shadow: 5px 0px 40px rgba(108, 150, 212, 0.3);
        position: absolute;
        bottom: -12px;
        width: 90px;
        height: 24px;
        line-height: 24px;
        left: 73px;
        background-color: #FFFFFF;
        color: #6C96D4;
        font-family: Microsoft YaHei;
        font-size: 14px;
        text-align: center;
        border-radius: 12px;
        cursor: pointer;
    }

    .panel > .content.c2 {
        width: 984px;
        height: 180px;
        margin: 0 auto;
 

        -moz-box-shadow:6px 7px 11px #f5fafe; -webkit-box-shadow:6px 7px 11px #f5fafe; box-shadow:6px 7px 11px #f5fafe;

    }

    .panel > .content.c2 .card2 {
        width: 245px;
        height: 180px;
        border-right: solid 1px #DCE3F7;
        float: left;
        line-height: 180px;
    }

    .panel > .content.c2 .card2 img {
        height: 64px;
        width: 64px;
        vertical-align: middle;
        margin-left: 20px;
        margin-right: 26px;
    }

    .panel > .content.c2 .card2 > div {
        height: 46px;
        display: inline-block;
        line-height: 27px;
        vertical-align: middle;
        font-size: 14px;
        font-family: Arial-BoldMT;

    }

    .panel > .content.c2 .card2 .line_1 {

        font-size: 26px;

    }

    .panel > .content.c2 .card2 > div a {
        text-decoration: none;
        font-size: 14px;
        font-family: Microsoft YaHei;
        color: rgba(108, 150, 212, 1);
        line-height: 0px;

    }

    .bottom_content {
        width: 984px;
        margin: 0 auto;
    }

    .bottom_content .left {
        float: left;
        width: 600px;
    }

    .bottom_content .right {
        float: right;
        width: 316px;
    }
    .bottom_content ul{
        margin-top: 36px;
    }
    .bottom_content ul li{

        height:50px;
        font-size:16px;
        font-family:Microsoft YaHei;
        color:#3A3F51;
        line-height:50px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        border-bottom: 1px dashed #6C96D4;
        letter-spacing: 1px;
    }
    .bottom_content .u2 li{
        border-bottom: none;
    }
    .bottom_content ul span{
        margin: 0 12px 0 12px;color: #999999
    }
</style>
<div class="right_content">
    <div class="panel">
        <div class="title"><p>我的资产</p><span>2018年7月5日更新</span></div>
        <div class="content c1">
            <div class="assets a">
                <div class="line_1">
                    <span style="font-size: 16px;vertical-align: middle;margin-left: 5px;font-family:Microsoft YaHei;"> 我的等级</span>
                    <span style="margin-left: 41px;font-size: 26px;vertical-align: middle">LV.10</span>
                </div>
                <div class="line_2">当前经验值600</div>
                <div class="line_3">
                    会员中心
                </div>
            </div>
            <div class="assets b">
                <div class="line_1">
                    <span style="font-size: 16px;vertical-align: middle;margin-left: 5px;font-family:Microsoft YaHei;">点券金额</span>
                    <span style="margin-left: 41px;font-size: 26px;vertical-align: middle">1000000</span>
                </div>
                <div class="line_2">
                    点券金额说明
                    <img src="img/wenhao@2x.png" style="display: inline-block;margin-left: 10px;vertical-align: middle"
                         width="16px"
                         height="16px"></div>
                <div class="line_3">
                    立即充值
                </div>
            </div>
            <div class="assets c">
                <div class="line_1">
                    <span style="font-size: 16px;vertical-align: middle;margin-left: 15px;font-family:Microsoft YaHei;">信用分</span>
                    <span style="margin-left: 41px;font-size: 26px;vertical-align: middle">100000</span>
                </div>
                <div class="line_2">
                    信用分说明
                    <img src="img/wenhao@2x.png" style="display: inline-block;margin-left: 10px;vertical-align: middle"
                         width="16px" height="16px"></div>

                <div class="line_3">
                    查看经验
                </div>
            </div>

        </div>
    </div>
    <div class="panel" style="margin-top: 46px">
        <div class="title"><p>最新数据</p></div>
        <div class="content c2">
            <div class="card2">
                <img src="img/online@2x.png">
                <div>
                    <div class="line_1">10000</div>
                    <div>当前在线</div>
                </div>
            </div>

            <div class="card2">
                <img src="img/online@2x.png">
                <div>
                    <div class="line_1">10</div>
                    <div>待审核<a href="#">(查看)</a></div>
                </div>
            </div>
            <div class="card2">
                <img src="img/online@2x.png">
                <div>
                    <div class="line_1">1</div>
                    <div>今日被拒<a href="#">(查看)</a></div>
                </div>
            </div>
            <div class="card2">
                <img src="img/online@2x.png">
                <div>
                    <div class="line_1">100</div>
                    <div>即将到期<a href="#">(查看)</a></div>
                </div>
            </div>
        </div>
    </div>

    <div class="bottom_content">
        <div class="left">
            <div class="panel" style="margin-top: 46px">
                <div class="title"><p>最新公告</p></div>
                <div class="content">
                    <ul>
                        <li>2018.621<span style="">|</span>新闻发布会新闻发布会新闻发布会新闻发布会布会新新闻发...</li>
                        <li>2018.621<span >|</span>新闻发布会新闻发布会新闻发布会新闻发布会布会新新闻发...</li>
                        <li>2018.621<span >|</span>新闻发布会新闻发布会新闻发布会新闻发布会布会新新闻发...</li>
                        <li>2018.621<span >|</span>新闻发布会新闻发布会新闻发布会新闻发布会布会新新闻发...</li>

                    </ul>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="panel" style="margin-top: 46px">
                <div class="title"><p>规则说明</p></div>
                <div class="content">
                    <ul class="u2">
                        <li>2018.621<span >|</span>新闻发布会新闻发布会新闻</li>
                        <li>2018.621<span >|</span>新闻发布会新闻发布会新闻发布会新闻发布会布会新新闻发...</li>
                        <li>2018.621<span >|</span>新闻发布会新闻发布会新闻发布会新闻发布会布会新新闻发...</li>
                        <li>2018.621<span >|</span>新闻发布会新闻发布会新闻发布会新闻发布会布会新新闻发...</li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>